<template>
	<view>
		<web-view :webview-styles="webviewStyles" :src="url" @message="getMessage" @onPostMessage="getPostMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#ffffff',
						height:'200px',
					}
				},
				navbarTitle:'首页',
				url:'',
				background: {
					backgroundColor: '#ffffff',
				}
			}
		},
		onLoad:function(option){
			console.log("option",option);
			if(!option.url){
				this.url="http://www.baidu.com"
			}else{
				this.url=option.url;
			}
		},
		methods:{
			closeAction:function(){
				console.log("返回");
				uni.navigateBack(
					{
						delta:2
					}
				);
			},
			getMessage(e) {
				console.log("@message 接收成功")
				this.closeAction()
			},
			getPostMessage(e) {
				console.log("@onPostMessage 接收成功")
				this.closeAction()
			},
		}
	}
	

</script>

<style>
	/*每个页面公共css */
	.capsule {
		display: flex; 
		align-items: center; 
		border:1px solid #E9E9E9;
		border-radius: 25px; 
		background: #fff;
		padding: 7rpx 20rpx; 
		position: relative;
		margin-right: 20rpx;
	}
	.capsule .more {width: 43rpx; height: 43rpx; margin-right: 20rpx;}
	.capsule .close {width: 36rpx; height: 36rpx; margin-left: 20rpx;}
	.capsule:before {content: ''; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 1px; height: 60%;
		background: #D4D4D4;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
</style>
